<template lang="jade">
div#app
  div.return-bar
    i.iconfont(@click="back()") &#xe668;
    推荐有礼

  div.user-center.detail_top
    //div.search.cbox.nopos.mb10
      li.input
        dl.cbox.ptype
          dd(v-bind:class="{ 'on': subview == 'first'}",v-on:click="setView('first')") 邀请好友数据总览
          dd(v-bind:class="{ 'on': subview == 'second'}",v-on:click="setView('second')") 推荐好友数据总览

    div.title 好友数据总览
    ul.moneylist.clearfix.noball(v-show=" subview == 'first' ")
      li
        span.red {{recommend.money}}
        strong 邀请奖励金额(元)

      li
        span {{recommend.count}}
        strong 邀请好友人数(人)



    ul.moneylist.clearfix(v-show=" subview == 'first' ",style="margin-bottom: 0rem;")
      li
        strong 好友本月投资(元)
        span {{recommend.invest_this_month}}
      li
        strong 本月奖励(元)
        span {{recommend.bonus_this_month}}
      li
        strong 好友上月投资(元)
        span {{recommend.invest_last_month}}
      li
        strong 上月奖励(元)
        span {{recommend.bonus_last_month}}

        
        
    ul.moneylist.clearfix.noball(v-show=" subview == 'second' ")
      li
        span {{recommend.count}}
        strong 推荐总人数

      li
        span {{recommend.tender}}
        strong 推荐好友总投资额
      li
        span {{recommend.money}}
        strong 奖励总额
      li
        span  
        strong 


    div.btnlist.mb10
      //a.p_btn(v-link="{ path: '/friends-list'}",style="width:90%;margin:auto;display:block") 好友列表
      //a.p_btn(v-link="{ path: '/friends-list'}",style="width:90%;margin:auto;display:block") 推荐好友
      //a.m_btn(v-link="{ path: '/add-friend'}") 邀请好友



    div.title 好友列表
    div.searchinput.cbox.nopos
      div.clx.input1
        input.kw( type="text", v-model="kw",placeholder="输入好友姓名或手机查找")
      div.clx
        button(@click="search()") 查找

    ul.firend-invite-list(v-infinite-scroll="down()" )
      li(v-for=" (index,item) in items " )
        //i.iconfont &#xe643;
        span {{item.realname}} {{item.phone}}
        strong 注册时间:{{item.birthday}}
        dl.cbox
          dd
            b {{item.tender}}
            em 投资总额(元)
          dd
            b {{item.reward}}
            em 投资奖励(元)


</template>

<script>
import {c_friends_list, c_friends_report} from '../../config/api'

export default {

  data () {
    return {
      info: {},
      subview:"first",
      invit:[],
      recommend:[],
      busy:false,
      page:1,
      items:[],
      kw:''
    }
  },


  methods: {
    setView(key){
      this.subview = key;
    },
    back(){
      window.history.back();
    },

    down: function() {
      if(this.busy == true || this.items == ''){
        return false;
      } 
      this.busy = true;
      this.flist(++this.page);
    },

    search(){
      this.items = [];
      this.flist(1);
    },

    flist: function (page) {
      var data = {'page': page}
      this.$http({url: c_friends_list+'&page='+page+'&name='+this.kw, method: 'GET'}).then(function (response) {


        var obj = response.data;
        if(!obj.status){
          //alert(obj.msg)
          if(obj.code == '10055'){
            sessionStorage.removeItem("login"); 
            this.$route.router.go('/login?from='+this.$route.path.substring(1))
          }
          return;
        }

        var result = response.data.data.list
        this.items = this.items.concat(result);
        this.busy = false;
        this.show_kw = false;

      });
    },



    fetch: function (next) {

      this.$http({url: c_friends_report, method: 'GET'}).then(function (response) {
        
        var obj = response.data;
        if(!obj.status){
          //alert(obj.msg)
          if(obj.code == '10055'){
            sessionStorage.removeItem("login"); 
            this.$route.router.go('/login?from='+this.$route.path.substring(1))
          }
          return;
        }

          
        //this.invit = response.data.data.invit
        //this.invit = response.data.data.recommend
        this.recommend  = response.data.data.recommend
        next();


      });
    }
  },
  route: {
    activate ( transition ) {
      this.flist(1);
      this.fetch(function(){
        transition.next();
        
      })
    }
  }
}
</script>